$(function () {
  var layer = layui.layer
  // 1. 初始化图片裁剪器
  var $image = $('#image')

  // 2. 裁剪选项
  var options = {
    aspectRatio: 1,
    preview: '.img-preview',
  }

  // 3. 初始化裁剪区域
  $image.cropper(options)
  $('#btnChooseImage').on('click', function (e) {
    $('#file').click()
    $('#file').on('change', function (e) {
      var filelist = e.target.files
      if (filelist.length === 0) {
        return layer.msg('请选择图片!')
      }
      var file = e.target.files[0]
      // 将图片转换为可访问的url地址
      var imgURL = URL.createObjectURL(file)
      $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', imgURL) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域
    })
  })
  $('#upload').on('click', function () {
    var dataURL = $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
      })
      .toDataURL('image/png')
    $.ajax({
      type: 'PATCH',
      url: '/my/update/avatar',
      data: { avatar: dataURL },

      success: function (response) {
        if (response.code !== 0) {
          return layer.msg('上传图片失败!')
        }
        layer.msg('上传图片成功!')
        window.parent.getUserInfo()
      },
    })
  })
})
